<template>
  <a-modal v-model:visible="visible" title="编辑" centered @ok="visible = false" :width="1000">
    <template #footer>
      <a-button type="primary" @click="saveForm()" :loading="saveLoading">提交</a-button>
      <a-button type="danger" ghost @click="visible = false" class="ml-24">关闭</a-button>
    </template>
    <a-spin :spinning="saveLoading">
      <a-alert v-if="vm.form.id" :message="'菜单Id:' + vm.form.id" type="success" class="mb-24" />
      <a-form layout="vertical" :model="vm.form">
        <a-row :gutter="[24, 24]">
          <!-- <a-col :xs="24">
            <a-form-item label="Id">
              <a-input v-model:value="vm.form.id" placeholder="请输入" readonly />
            </a-form-item>
          </a-col> -->
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <a-form-item label="编号">
              <a-input v-model:value="vm.form.number" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <a-form-item label="菜单名称">
              <a-input v-model:value="vm.form.name" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <a-form-item label="组件名称">
              <a-input v-model:value="vm.form.componentName" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <a-form-item label="菜单页面物理地址">
              <a-input v-model:value="vm.form.url" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <a-form-item>
              <template #label>
                菜单路由 &nbsp;&nbsp;
                <a-tooltip>
                  <template #title>跳转外部地址使用此表达式：/external/jump/:path(.*) 。并且要在跳转地址填上外部网址</template>
                  <AppIcons name="QuestionCircleOutlined" class="text-danger" />
                </a-tooltip>
              </template>
              <a-input v-model:value="vm.form.router" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <a-form-item>
              <template #label>
                跳转地址 &nbsp;&nbsp;
                <a-tooltip>
                  <template #title>跳转地址（不填默认使用 菜单路由地址）支持 http、https</template>
                  <AppIcons name="QuestionCircleOutlined" class="text-danger" />
                </a-tooltip>
              </template>
              <a-input v-model:value="vm.form.jumpUrl" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <a-form-item>
              <template #label>
                <a href="https://next.antdv.com/components/icon-cn" target="black"> 图标（请使用AntdV 3.0 官方icon） </a>
              </template>

              <a-dropdown>
                <a-input v-model:value="vm.form.icon" placeholder="请输入">
                  <template #suffix v-if="vm.form.icon">
                    <AppIcons :name="vm.form.icon" />
                  </template>
                </a-input>
                <template #overlay>
                  <AppIconList v-model:name="vm.form.icon" class="AppIconList" />
                </template>
              </a-dropdown>
            </a-form-item>
          </a-col>

          <a-col :xs="24">
            <a-row style="width: 100%">
              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <a-form-item>
                  <template #label>
                    显示状态&nbsp;<span class="text-danger">隐藏后此菜单就变成了路由</span>&nbsp;
                    <a-tooltip>
                      <template #title> 隐藏后菜单不会显示在左侧显示，但是路由会自动添加到程序中 </template>
                      <AppIcons name="QuestionCircleOutlined" class="text-danger" />
                    </a-tooltip>
                  </template>
                  <a-radio-group v-model:value="vm.form.show">
                    <a-radio :value="true">显示</a-radio>
                    <a-radio :value="false">隐藏</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>

              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <a-form-item>
                  <template #label>
                    菜单状态 &nbsp;&nbsp;
                    <a-tooltip>
                      <template #title>停用后菜单不会显示在左侧显示，并且路由也不会自动添加到程序中</template>
                      <AppIcons name="QuestionCircleOutlined" class="text-danger" />
                    </a-tooltip>
                  </template>
                  <a-radio-group v-model:value="vm.form.state">
                    <a-radio :value="true">正常</a-radio>
                    <a-radio :value="false">停用</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>

              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <a-form-item label="是否缓存组件">
                  <a-radio-group v-model:value="vm.form.keepAlive">
                    <a-radio :value="true">是</a-radio>
                    <a-radio :value="false">否</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>

              <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <a-form-item label="选项卡能否关闭">
                  <a-radio-group v-model:value="vm.form.close">
                    <a-radio :value="true">是</a-radio>
                    <a-radio :value="false">否</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>

          <a-col :xs="24">
            <a-form-item>
              <template #label>
                <span class="mr-24"> 拥有功能</span>
                <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange"> 全选/取消 </a-checkbox>
              </template>
              <a-checkbox-group v-model:value="vm.functionIds" class="w100">
                <a-row>
                  <a-col :span="6" v-for="(item, index) in vm.allFunctions" :key="index">
                    <a-checkbox :value="item.id">
                      {{ item.name }}
                    </a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { defineAsyncComponent, defineComponent, reactive, toRefs, watch } from "vue";
import tools from "@/scripts/tools";
import service from "@/service/system/menuService";
import AppIcons from "@/components/AppIcons.vue";
// import AppIconList from "@/components/AppIconList.vue";

export default defineComponent({
  name: "system_menu_info",
  props: {
    onSuccess: Function,
  },
  components: {
    AppIcons,
    AppIconList: defineAsyncComponent(() => import("@/components/AppIconList.vue")),
  },
  setup(props, context) {
    const state = reactive({
      vm: {
        id: "",
        form: {},
        allFunctions: [],
        functionIds: [],
      },
      visible: false,
      saveLoading: false,
      parentId: null,
      checkAll: false,
      indeterminate: false,
    });

    const methods = {
      findForm() {
        state.saveLoading = true;
        service.findForm(state.vm.id).then((res) => {
          state.saveLoading = false;
          if (res.code != 1) return;
          state.vm = res.data;
        });
      },
      saveForm() {
        state.saveLoading = true;
        state.vm.form.parentId = state.parentId ? state.parentId : null;
        service.saveForm(state.vm).then((res) => {
          state.saveLoading = false;
          if (res.code != 1) return;
          tools.message("操作成功!", "成功");
          context.emit("onSuccess", res.data);
          state.visible = false;
        });
      },
      //打开表单初始化
      openForm({ visible, key, parentId }) {
        state.visible = visible;
        if (visible) {
          state.vm.id = key;
          state.parentId = parentId;
          methods.findForm();
        }
      },
      //全选/全不选
      onCheckAllChange(e) {
        if (e.target.checked) {
          state.vm.functionIds = state.vm.allFunctions.map((w) => w.id);
        } else {
          state.vm.functionIds = [];
        }
      },
    };

    //全选/全不选
    watch(
      () => state.vm.functionIds,
      (val) => {
        state.indeterminate = !!val.length && val.length < state.vm.allFunctions.length;
        state.checkAll = val.length === state.vm.allFunctions.length;
      }
    );

    context.expose({ ...methods });

    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}

.AppIconList {
  position: absolute;
  background: #ffffff;
  z-index: 1;
  border: 1px solid #52c41a;
  border-radius: 2px;
  height: 250px;
  overflow: auto;
}
</style>
